<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>6.svg绘制多边形与任意图形</title>
  <style>
    svg {
      width: 800px;
      height: 600px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <svg>
    <!-- 这个多边形是首尾相联的 至少得有三个坐标 -->
    <polygon points="100 100,200 200,200 100,400 300," />
  </svg>

  <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
    <g>
     <title>background</title>
     <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
     <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
      <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
     </g>
    </g>
    <g>
     <title>Layer 1</title>
     <ellipse ry="77" rx="106.5" id="svg_1" cy="133.10938" cx="148" stroke-width="1.5" stroke="#000" fill="#fff"/>
     <path id="svg_2" d="m338.5,82.10938c75,44 31,98 80,39c49,-59 18,-110 53,-56c35,54 6,84 53,54c47,-30 48,-137.00001 39,-38c-9,99 55,117 -14,100c-69,-17 -52,-31 -81,-11c-29,20 17,49 -45,21c-62,-28 -26,-80 -73,-50c-47,30 -55,89 -47,26c8,-63 32,-13 9,-63c-23,-50 -69,-88 -23,-55c46,33 89,205 88.5,204.89062" stroke-width="1.5" stroke="#000" fill="#fff"/>
     <path d="m31.5,263.10938c0,-1 0.0252,-1.88135 5,-3c4.02266,-0.90457 6,-2 11,-2c3,0 8.31001,0.66251 11,-1c2.406,-1.487 4,-2 7,-2c1,0 2,0 3,0c1,0 2,0 4,0c2,0 4.78985,2.07843 6,5c1.71141,4.13171 3.97251,9.64749 5,14c0.4595,1.9465 0.49755,5.92578 1,11c0.39415,3.98053 0,8 0,12c0,3 0,6 0,7c0,1 0,4 0,5c0,1 0.05132,2.31622 1,2c4.74342,-1.58115 7.27743,-7.88596 12,-11c4.49576,-2.96448 11.15688,-2.57971 17,-5c6.19757,-2.56711 8,-3 8,-3c3,0 6,0 10,0c1,0 2,0 2,3c0,3 0,8 0,13c0,4 0.46764,10.19891 -1,13c-4.64107,8.85779 -8.52216,11.83179 -15,15c-5.68144,2.77872 -11.98453,4.08075 -17,5c-5.9831,1.09662 -13,1 -19,1c-6,0 -12.0966,0.46625 -18,-1c-6.13806,-1.52454 -10.29289,-4.29291 -11,-5c-0.70711,-0.70709 -1.26962,1.69363 3,8c2.37855,3.51318 4.38903,7.65591 7,11c3.58844,4.59598 4,8 6,12c1,2 0.33749,3.31 2,6c1.48699,2.40601 3.57111,4.67947 8,7c5.60216,2.93527 9,2 14,2c8,0 17,0 25,0c8,0 18.32997,-0.97168 26,-4c9.57625,-3.78094 18.26103,-8.45792 27,-13c10.3477,-5.3782 31.83913,-19.22601 43,-27c8.87576,-6.18231 25.61945,-9.76303 22,-16c-1.12234,-1.93399 -3,4 -3,7c0,1 -0.70711,3.29291 0,4c1.41422,1.41422 4.29362,0.2735 8,-4c3.27602,-3.77728 3,-7 4,-12c1,-5 1,-12 1,-19c0,-7 0.82645,-15.29095 -2,-22c-3.13011,-7.42984 -8.42238,-14.53281 -14,-20c-4.57274,-4.48219 -11.6113,-8.89682 -20,-12c-7.73399,-2.86099 -16.95332,-3.49904 -25,-4c-6.98648,-0.43497 -14.02434,-0.49269 -19,0c-5.0742,0.50244 -8.49756,2.9258 -9,8c-0.19708,1.99026 0,5 0,5c0,0 0.47186,4.11832 0,5c-1.70131,3.17892 -8,2 -14,2c-3,0 -8,0 -14,0c-8,0 -14.90633,0.10339 -16,1c-2.78832,2.28589 -3,5 -3,8c0,2 0.88152,7.19028 4,9c5.80199,3.36703 10.90282,5.22421 13,6c3.867,1.43048 7,2 9,2c4,0 5,1 4,1c-2,0 -3,2 -3,4c0,4 -1.71292,7.38531 0,11c6.08629,12.84357 15.98523,10.10947 23,11c8.98328,1.14044 19,1 35,1c7,0 16.95517,-5.54916 18,-9c0.57957,-1.91418 1.41422,-3.58578 0,-5c-0.70711,-0.70709 -3.08025,-0.68927 -6,0c-2.17625,0.51373 -3,5 -3,8c0,5 -0.66202,7.11273 0,9c2.11948,6.04218 8,6 11,6c6,0 16,2 25,2c13,0 27,0 39,0c13,0 26,0 37,0c12,0 22.01309,-0.87665 32,-2c8.01172,-0.90118 7.79318,-0.18735 6,2c-4.57175,5.57666 -5.49347,11.87857 -6,15c-0.16019,0.98709 2,1 6,1c2,0 7,-1 13,-4c6,-3 13.74402,-5.7702 21,-11c4.58908,-3.30762 8.95914,-7.43546 11,-12c2.08127,-4.65494 2.73309,-11.04495 2,-17c-0.50378,-4.09222 -4.47491,-9.93027 -11,-13c-9.44708,-4.4444 -19.74228,-9.05597 -30,-11c-11.83099,-2.24222 -24,-2 -36,-2c-14,0 -26,0 -26,0c0,0 -10.07666,-0.68353 -22,1c-10.09787,1.42578 -17.07278,3.8819 -22,7c-3.04672,1.92807 -3,3 -2,4c0,0 -2,0 -4,0l-7,0l-4,0" id="svg_5" stroke-width="1.5" stroke="#000" fill="none"/>
     <path d="m61.5,224.10938c4,0 6,0 10,0c6,0 14,0 23,0c9,0 20,0 29,0c9,0 17,0 24,0c4,0 6.22665,-0.63399 7,0c3.94328,3.23273 1.49829,7.93796 2,14c0.65985,7.97275 1,19 2,29c1,10 4.99399,18.83551 6,28c0.10912,0.99402 1,2 4,2c1,0 3,0 3,0c3,0 2.96384,0.11588 6,1c3.95868,1.15277 7,2 10,2c1,0 2,0 3,0c1,0 3.07843,0.21014 6,-1c2.06586,-0.85571 5.04132,-1.84723 9,-3c3.03616,-0.88412 6.83551,-4.99399 16,-6c2.98209,-0.32736 7,-1 13,-1c0,0 3,0 7,0c5,0 11,0 12,0c1,0 4,0 7,0c4,0 6,0 8,0l4,0" id="svg_6" stroke-width="1.5" stroke="#000" fill="none"/>
     <path d="m420.5,283.10938c3,0 6.01688,0.96222 15,5c11.0209,4.95374 24.91089,12.18832 48,23c23.9093,11.19574 49.0802,21.79773 72,31c17.06104,6.84998 30.59741,9.64215 34,16c0.94373,1.76334 1.53076,5.30447 0,9c-2.16479,5.22626 -5.91827,5.11215 -10,8c-2.94336,2.08246 -8.21167,4.71411 -11,7c-2.18732,1.79318 -6,5 -6,5c-1,0 -4.94342,3.14774 -10,5c-5.93866,2.17538 -7.50433,1.59399 -12,4c-2.49377,1.33463 -4,3 -4,2c0,-2 0,-7 0,-10c0,-5 0,-7 0,-11c0,-4 0,-11 0,-18c0,-8 -0.97089,-14.06766 0,-21c1.00977,-7.20975 3,-13 3,-16c0,-2 -3,-3 -8,-4l-3,0" id="svg_7" stroke-width="1.5" stroke="#000" fill="none"/>
     <path d="m485.5,277.10938c-3,0 -6,-1 -10,-1c-3,0 -5,0 -7,0c-3,0 -7,3 -10,6c-4,4 -8.91895,10.05859 -14,17c-5.90659,8.06921 -10.56531,13.65942 -14,20c-3.62744,6.69641 -5.49622,12.90778 -6,17c-0.12219,0.99249 -0.29291,2.29291 -1,3c-0.70709,0.70709 -1.03552,-1.50424 -4,-6c-3.89255,-5.90323 -10,-11 -15,-17l-7,-5" id="svg_8" stroke-width="1.5" stroke="#000" fill="none"/>
     <path d="m311.5,241.10938c-4,0 -11.08051,-0.09508 -17,5c-9.12646,7.85542 -18,17 -25,27c-7,10 -11.79568,20.09116 -15,27c-1.88164,4.05701 -3,7 -3,8l0,1l1,0" id="svg_9" stroke-width="1.5" stroke="#000" fill="none"/>
     <path id="svg_10" d="m11,34.89511l25.20993,0l7.79006,-24.44589l7.79007,24.44589l25.20993,0l-20.39523,15.10822l7.79047,24.44589l-20.39524,-15.10863l-20.39523,15.10863l7.79047,-24.44589l-20.39523,-15.10822z" stroke-width="1.5" fill="#fff"/>
     <rect id="svg_12" height="39" width="87" y="12.10938" x="15.5" stroke-width="1.5" fill="#fff"/>
    </g>
   </svg>
</body>
</html>